<template>
    <div class="imageComponent" v-if="oItem">
        <div class="head">
            <div class="title">
                <span class="text">{{oItem.title}}</span>
                <span class="required" v-if="oItem.required">*</span>
            </div>
            <div class="desc" v-if="oItem.desc">{{oItem.desc}}</div>
        </div>
        <div class="body">
            <div class="item" v-for="img in oItem.list" :key="img.id">
                <div class="noImg" v-if="!img || !img.url">
                    <i class="iconfont icon-charutupian"></i>
                    <span>添加图片</span>
                    <input type="file" title="点击选择图片" accept=".jpg,.jpge,.png" @change="uploadImg($event,img)" />
                </div>
                <div class="hasImg" v-if="img && img.url!=''">
                    <img :src="img.url" :alt="img.name" />
                    <button class="del"><i class="iconfont icon-shanchu5"></i></button>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import Bus from "@/utils/bus";
export default {
    name: "imageComponent",
    data() {
        return {
            pageName: "图片组件",
            oItem: null
        }
    },
    created() {},
    props: ["item"],
    components: {},
    mounted() {
        if(this.item) {
            this.oItem = JSON.parse(this.item);
            const ename = this.oItem.ename;
            const id = this.oItem.id;
            Bus.$on(`${ename}${id}`, (params)=>{
              if(params.required !== undefined ) {
                 this.oItem.required = params.required;
              }
              if(params.title !== undefined ) {
                 this.oItem.title = params.title;
              }
              if(params.desc !== undefined ) {
                 this.oItem.desc = params.desc;
              }
              if(params.max !== undefined ) {
                 this.oItem.max = params.max;
                 if(this.oItem.max<this.oItem.list.length) {
                   let arr = [];
                   this.oItem.list.forEach((li,idx) => {
                      if(idx<this.oItem.max) {
                        arr.push(li)
                      }
                   })
                   this.oItem.list = JSON.parse(JSON.stringify(arr));
                 }
              }
            })
        }

    },
    methods: {
        uploadImg(e,row) {
            let that = this;
            let file = e.target.files[0];
            let r = new FileReader();
            r.readAsDataURL(file);
            r.onload = function(){
                that.oItem.list.forEach(item => {
                    if(item.id === row.id) {
                        item.name = file.name;
                        item.url = this.result;
                    }
                })
                if(that.oItem.list.length<that.oItem.max) {
                    that.oItem.list.push({
                        id: new Date().getTime(),
                        name: "",
                        url: ""
                    })
                }
            }
        }
    },
    computed: {},
    watch: {},
}
</script>
<style scoped lang="scss">
.imageComponent{margin-bottom:10px;
    width:100%;
    padding:0 15px;
    box-sizing:border-box;
    display:flex;
    flex-direction:column;
    .head{display:flex; width:100%; flex-direction:column; margin-bottom:10px;
        .title{width:100%;margin-bottom:5px;
            .text{color:#333;margin-right: 5px; word-break: break-all;}
            .required{color:red; position: relative; top:3px;}
        }
        .desc{font-size:12px;color:#999;line-height:20px; word-break: break-all;}
    }
    .body{display:flex; flex-wrap:wrap;
        .item{width:100px;height:100px; margin: 0 15px 15px 0;border:1px solid #ddd;
        box-sizing:border-box;
            .noImg{width:100%;
            height:100%;
            position:relative;
            display:flex;
            justify-content:center;
            align-items:center;
            flex-direction:column;
                i{font-size:30px;color:#888;width:100%;height:50%;display:flex;
                justify-content:center;align-items:center;opacity:0.7;}
                span{font-size:14px;color:#888;}
                input{position:absolute;left:0;top:0;z-index:2;width:100%;
                height:100%;display:block;opacity:0;cursor:pointer;}
            }
            .hasImg{ position:relative;width:100%;height:100%;
                img{width:100%;height:100%;display:block;}
                .del{position:absolute; cursor:pointer;
                top:0;right:0;z-index:2;
                background-color:rgba(0,0,0,0.5); border:none;height:30px;border-radius: 0 0 0 4px;

                    i{font-size:16px;color:#fff;}
                }
            }
        }
    }
}
</style>
